{% extends 'base.html' %}
{% block title %}Brisbane Coupon{% endblock %}
{% block stylesheet %}
{{ block.super }}
<style type="text/css">
</style>
{% endblock%}

{% block javascript %}
{{ block.super }}
<script type="text/javascript">
</script>
{% endblock%}

{% block content %}
  <div id="dLayout">
    <div id="dSearch">
      <form method="get" action="">
      {{ search_form.q }}
      </form>
    </div> <!-- end dSearch-->
  </div> <!-- end dLayout-->
  
  <div id="dWrapper">
    <div id="main" role="main">
      <ul id="tiles" class="transitions-enabled infinite-scroll clearfix">

        {% if events %}
        
        {% load thumbnail %}
        {% load brispon_filter %}
        
        {% for e in events %}
        <li>
          <div id="dRibon">+{{ e.edate|timeuntil|shortendate }}</div>
          <span class="cTitle">
              <h2><a href="{{ e.url }}" target="_blank">{{ e.name }}</a></h2>
          </span>
          <div id="dSmBoxEventIn">
            <div class="mosaic-block bar">
              <a href="{{ e.url }}" target="_blank" class="mosaic-overlay">
                <div class="details">
                {{ e.short_description|safe }}
                </div>
              </a>
              <div class="mosaic-backdrop">
                {% thumbnail e.thumbnail "270x200" as im %}
                <img src="{{ im.url }}">
                {% endthumbnail %}
              </div>
            </div>
          </div>
          <div class="cEventsDes">
            <div class="cEventsDetail">
              <span id="dStore"><a href="{{ e.store.url }}" target="_blank">{{ e.store.name }}</a></span>
              <span id="dDate">행사 마감일 : {{ e.edate|date:"D d M" }}</span>
            </div>
          </div>
        </li>
        {% endfor %}
        
        {% endif %}


      </ul>
    </div> <!-- end main-->
  </div> <!-- end dWrapper-->

<script type="text/javascript" src="{{ STATIC_PREFIX }}js/d/jquery.wookmark.js"></script>
<script type="text/javascript" src="{{ STATIC_PREFIX }}js/d/mosaic.1.0.1.js"></script>
<script type="text/javascript">
var handler = null;

// Prepare layout options.
var options = {
  autoResize: true, // This will auto-update the layout when the browser window is resized.
  container: $('#main'), // Optional, used for some extra CSS styling
  offset: 20, // Optional, the distance between grid items
  itemWidth: 300 // Optional, the width of a grid item
};

$(document).ready(new function() {
  // Call the layout function.
  $('.bar').mosaic({
    animation: 'slide'
  });
  // Clear our previous layout handler.
  if(handler) handler.wookmarkClear();
          
  // Create a new layout handler.
  handler = $('#tiles li');
  handler.wookmark(options);
});
</script>
{% endblock %}
